<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity">-->
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="/sys/base :: headFragment(~{::title},~{::link},~{::style})"></head>

<body class="layui-layout-body" sec:authorize="isAuthenticated()">
<div class="layui-layout layui-layout-admin">
    <!-- 导航栏 -->
    <div class="layui-header">
        <a href="#" class="layui-logo">
            <span class="layui-logo-mini"><small>菜单栏</small></span>
            <span class="layui-logo-lg">陕西网厅</span>
        </a>
        <a class="side-toggle layui-layout-left" href="#">
            <i class="layui-icon layui-icon-shrink-right"></i>
            <i class="layui-icon layui-icon-spread-left"></i>
        </a>
        <ul class="layui-nav layui-layout-right">
<!--            <li class="layui-nav-item base-search">-->
<!--              <input class="base-search-input" type="search" placeholder="搜索">-->
<!--              <button class="base-search-button"><i class="fa fa-search"></i></button>-->
<!--            </li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="#">-->
<!--                    <i class="fa fa-bell-o fa-lg"></i>-->
<!--                </a>-->
<!--            </li>-->
            <li class="layui-nav-item">
                <a class="base-screen-full" href="#">
                    <i class="fa layui-icon layui-icon-screen-full"></i>
                </a>
            </li>
            <li class="layui-nav-item base-nav-user">
                <a class="base-header-nickname" href="#" sec:authentication="name">
<!--                    <th:block sec:authentication="name"></th:block>-->
<!--                    <th:block sec:authentication="principal.username"></th:block>-->
<!--                    <th:block sec:authentication="principal.enabled"></th:block>-->
<!--                    <th:block sec:authentication="principal.authorities"></th:block>-->
<!--                    <th:block sec:authentication="principal.id"></th:block>-->
                </a>
                <div class="layui-nav-child">
                    <div class="nav-child-box">
                        <div>
                            <a sec:authorize="hasAnyRole('SUPERADMIN,ADMIN')" onclick="openSysModifyDialog('个人信息','/sys/admin/toUserInfo/base','800,600')">
                                <i class="fa fa-user-o"></i>个人信息
                            </a>
                        </div>
                        <div>
                            <a sec:authorize="hasAnyRole('SUPERADMIN,ADMIN')" onclick="openSysModifyDialog('修改密码','/sys/admin/toUserInfo/pwd','420,260')">
                                <i class="fa fa-lock" style="font-size:17px;width:12px;"></i>修改密码
                            </a>
                        </div>
                        <div>
                            <a sec:authorize="hasAnyRole('SUPERADMIN,ADMIN')" th:onclick="window.location.replace($.getProjectNameLI()+'/sys/admin/logout')">
                                <i class="fa fa-power-off"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- 侧边栏 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 头像 -->
            <div class="layui-side-user" onclick="openSysModifyDialog('更新头像','/sys/admin/toUpdateCover','900,480')">
                <th:block th:switch="${#authentication.principal.cover}">
                    <img class="layui-side-user-avatar" th:case="null" th:src="@{/static/img/defaultHead.png}" th:attr="data-title='个人信息',data-url=@{/sys/admin/toUserInfo/base},data-size='680,464'">
                    <img class="layui-side-user-avatar" th:case="*" th:src="@{${#authentication.principal.cover}}" th:attr="data-title='个人信息',data-url=@{/sys/admin/toUserInfo/base},data-size='680,464'">
                </th:block>
                <div>
                    <p class="layui-side-user-name">
                        <th:block th:switch="${#authentication.principal.grade}">
                            <th:block th:case="1">超级管理员</th:block>
                            <th:block th:case="2">省级管理员</th:block>
                            <th:block th:case="3">市级管理员</th:block>
                            <th:block th:case="5">区级管理员</th:block>
                            <th:block th:case="*">未知</th:block>
                        </th:block>
                    </p>
                    <p class="layui-side-user-designation">在线</p>
                </div>
            </div>
            <!-- 导航区域 -->
            <ul id="sideMenu" class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="layui-nav-side">
                <li class="layui-nav-item">
                    <a lay-icon="true" lay-url="/warboot/sys/admin/welcome">
                        <i class="layui-icon layui-icon-home"></i>
                        <span class="layui-nav-title">主页</span>
                    </a>
                </li>
                <th:block th:each="item1,status1:${permissionList}">
                    <th:block th:if="${item1.grade==1}">
                        <!-- 一级菜单 -->
                        <li class="layui-nav-item" th:attr="id=${item1.id},pid=${item1.pid},grade=${item1.grade}">
                            <a th:attr="lay-url=${item1.action}" href="javascript:void(0)">
                                <i th:class="${'fa '+item1.icon}"></i>
                                <span class="layui-nav-title" th:text="${item1.permissionName}"></span>
                                <span class="layui-nav-more"></span>
                            </a>
                            <dl class="layui-nav-child">
                                <th:block th:each="item2,status2:${permissionList}">
                                    <th:block th:if="${item2.grade==2 && item2.pid == item1.id}">
                                        <!-- 二级菜单 -->
                                        <dd>
                                            <a th:attr="lay-url=${item2.action}" href="javascript:void(0)">
                                                <i th:class="${'fa '+item2.icon}"></i>
                                                <span class="layui-nav-title" th:text="${item2.permissionName}"></span>
                                            </a>
                                        </dd>
                                    </th:block>
                                </th:block>
                            </dl>
                        </li>
                    </th:block>
                </th:block>
            </ul>
        </div>
    </div>

    <!-- 主体区域 -->
    <div class="layui-body layui-tab layui-tab-brief" lay-allowclose="true" lay-filter="iframe-tabs">
        <!-- 标签栏 -->
        <ul class="layui-tab-title"></ul>
        <!-- 内容区域 -->
        <div class="layui-tab-content"></div>
    </div>
</div>

<script th:replace="/sys/base :: scriptFragment"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['jquery','element','layer'], function () {
        var $ = layui.jquery;
        var element = layui.element;

        //console.log("可见区域的高度，随当前浏览器窗口大小改变而改变："+$(window).height());
        //console.log("页面的文档高度："+$(document).height());
        window.layuiTabContentHeight = $(document).height()-(50+40+0.8);
        $(".layui-tab-content").css({height:window.layuiTabContentHeight,overflow:'hidden',backgroundColor:'#eeeeee'}); // TODO 动态设置内容区域的高度

        // TODO 格式化左侧菜单链接地址，在lay-url值的后面追加项目名
        var sideMenuLink = $("ul#sideMenu li:gt(0) dl dd a");
        var sideMenuLinkLength = sideMenuLink.length;
        var projectName = $.getProjectNameLI();
        for (var i = 0; i < sideMenuLinkLength; i++) {
            var a = sideMenuLink.eq(i);
            a.attr("lay-url", projectName + a.attr("lay-url"));
        }

        // TODO 解决首页Tab刷新后丢失的问题
        var firstTabName = $("#sideMenu").children("li.layui-nav-item:eq(0)").find("span").text();
        if ("首页" !== firstTabName) {
            var url = "/warboot/sys/admin/welcome";
            element.tabAdd('iframe-tabs', {
                title: "首页"
                , content: '<iframe name="url" class="layui-layout-iframe" frameborder="0" src="' + url + '"></iframe>'
                , id: url
            });
            element.tabChange('iframe-tabs', url);
        }
        // TODO 新增Tab后，删除首页Tab中的关闭图标
        $(".layui-tab-title").children("li:eq(0)").find("i").remove();

        $(".base-screen-full").on("click", function (e) { // TODO 全屏
            e.preventDefault();
            if (!$(this).hasClass("full-on")) {
                var docElm = document.documentElement;
                var full = docElm.requestFullScreen || docElm.webkitRequestFullScreen ||
                    docElm.mozRequestFullScreen || docElm.msRequestFullscreen;
                "undefined" !== typeof full && full && full.call(docElm);
            } else {
                document.exitFullscreen ? document.exitFullscreen()
                    : document.mozCancelFullScreen ? document.mozCancelFullScreen()
                    : document.webkitCancelFullScreen ? document.webkitCancelFullScreen()
                        : document.msExitFullscreen && document.msExitFullscreen()
            }
            $(this).toggleClass("full-on");
        });

        $(".side-toggle").on("click", function (e) { // TODO 左右收缩菜单面板
            e.preventDefault();
            var to = $(".layui-layout-admin");
            to.toggleClass("layui-side-shrink");
            to.attr("toggle") === 'on' ? to.attr("toggle", "off") : to.attr("toggle", "on");
        });

        $(".layui-side").on("click", function () { // TODO 上下收缩菜单栏
            var to = $(".layui-layout-admin");
            if (to.attr("toggle") === 'on') {
                to.attr("toggle", "off");
                to.removeClass("layui-side-shrink");
            }
        });

        element.on("nav(layui-nav-side)", function ($this) { // TODO tab标签新增、切换
            var url = $this.attr('lay-url'); // 当前菜单的 lay-url 属性值，格式：/sys/admin/welcome（主页）
            //var href = window.document.location.href; // http://127.0.0.1:8080/warboot/sys/admin/index#/sys/admin/welcome
            //var pathname = window.document.location.pathname; // /warboot/sys/admin/index
            //var contextPath = pathname.substring(0, pathname.indexOf("/", 2)); // /warboot
            tabs(url);
        });
        var tabs = function (url) { // 新增、切换tab标签栏
            var item = $('[lay-url="' + url + '"]');
            if (url !== undefined && item.length > 0 && url.indexOf('#') === -1) {
                var bootLay = $('[lay-id="' + url + '"]');
                if (bootLay.length === 0) {
                    var title = item.attr("lay-icon") === 'true' ? item.html() : item.children(".layui-nav-title").text();
                    //var iframeUrl = (window.location.pathname + url).replace('//', '/');
                    element.tabAdd('iframe-tabs', {
                        title: title
                        , content: '<iframe name="url" class="layui-layout-iframe" frameborder="0" src="' + url + '"></iframe>'
                        , id: url
                    });
                }
                element.tabChange('iframe-tabs', url);
            }
            // TODO 新增Tab后，删除首页Tab中的关闭图标
            $(".layui-tab-title").children("li:eq(0)").find("i").remove();
        };

        element.on('tabDelete(iframe-tabs)', function(data){ // TODO tab标签删除
            //console.log(this); //当前Tab标题所在的原始DOM元素
            //console.log(data.index); //得到当前Tab的所在下标
            //console.log(data.elem); //得到当前的Tab大容器
            if (data.index === 0) {
                window.top.location.reload();
            }
        });

        element.on("tab(iframe-tabs)", function (data) { // TODO tab标签高亮显示
            //console.log(this); //当前Tab标题所在的原始DOM元素
            //console.log(data.index); //得到当前Tab的所在下标
            //console.log(data.elem); //得到当前的Tab大容器
            var layId = $(this).attr("lay-id");
            $(".layui-side .layui-this").removeClass("layui-this");
            $('[lay-url="' + layId + '"]').parent().addClass("layui-this");
            location.hash = this.getAttribute('lay-id'); // 改变地址hash值
        });

        window.onhashchange = function (e) {
            var url = location.hash.replace(/^#/, '');
            var index = $(".layui-layout-admin .layui-side .layui-nav-item")[0];
            $(index).children("a").attr("lay-icon", "true");
            if (url === "" || url === undefined) {
                url = $(index).children("[lay-url]").attr("lay-url");
            }
            tabs(url);
        };
        window.onhashchange(); // TODO 监听hash来切换选项卡
        $("ul#sideMenu li.layui-nav-item dl.layui-nav-child dd.layui-this").parents("li.layui-nav-item").addClass("layui-nav-itemed"); // TODO  初始化时，默认展开当前tab栏对应的子菜单
    });
</script>

</body>
</html>
